<script setup lang='ts'>
import { ref } from "vue";
import { useApplyInsurance } from "./hooks/ApplyInsurance";
import { PureTableBar } from "@/components/RePureTableBar";
const {
  rules,
  ServiceLife,
  accidentsNum,
  Caruse,
  carttype,
  stubims,
  loading,
  columns,
  dataList,
  btnloading,
  ApplyForm,
  lodingType,
  pagination,
  active_cart,
  ProductName,
  DialogVisible,
  Refstubim_from,
  insureDetailList,
  insuranceProductList,
  Apply,
  close_from,
  stubim_from,
  handleSizeChange,
  handleCurrentChange
} = useApplyInsurance()

</script>

<template>
  <div class="main">
    <!-- 申请投保 -->
    <PureTableBar title="保险产品列表" class="list_hei">
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading"
          size="small" :data="dataList" max-height="650" :columns="columns" :checkList="checkList"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :pagination="pagination"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' size="small" text @click="Apply(row)"> 申请投保 </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>


    <ReDialog :width="700" :height="550" :models="DialogVisible" @Closes="close_from(Refstubim_from)">
      <template #header>
        <h2 style="text-align: center;">申请投保</h2>
      </template>
      <template #main>
        <el-tabs type="border-card" v-model="active_cart">
          <el-tab-pane label="投保信息" name="1">
            <el-scrollbar height="440px">
              <el-form label-width="130px" :model="ApplyForm" :rules="rules" ref="Refstubim_from" calss="Refstubim_from">
                <h2 class="form_tips_title">投保人</h2>
                <div class="form_tabl_msg">
                  <el-form-item label="投保人" prop="piApplicant">
                    <el-input v-model.trim="ApplyForm.piApplicant" class="!w-[180px]" />
                  </el-form-item>
                  <el-form-item label="年龄" prop="applicantAge">
                    <el-input type="number" v-model.number="ApplyForm.applicantAge" class="!w-[180px]" />
                  </el-form-item>
                  <el-form-item label="性别" prop="applicantSex">
                    <el-select v-model="ApplyForm.applicantSex" class="!w-[180px]">
                      <el-option label="男" value="男" />
                      <el-option label="女" value="女" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="身份证号码" prop="idCard">
                    <el-input v-model.trim="ApplyForm.idCard" class="!w-[180px]" />
                  </el-form-item>
                  <el-form-item label="电话号码" prop="phone">
                    <el-input v-model.trim="ApplyForm.phone" class="!w-[180px]" />
                  </el-form-item>
                </div>
                <h2 class="form_tips_title" v-if="lodingType == '健康险' || lodingType == '意外险'">被保险人</h2>
                <div class="form_tabl_msg" v-if="lodingType == '健康险' || lodingType == '意外险'">
                  <el-form-item label="姓名" prop="assured">
                    <el-input v-model.trim="ApplyForm.assured" class="!w-[180px]" />
                  </el-form-item>
                  <el-form-item label="年龄" prop="assuredAge">
                    <el-input type="number" v-model.number="ApplyForm.assuredAge" class="!w-[180px]" />
                  </el-form-item>
                  <el-form-item label="性别" prop="assuredSex">
                    <el-select v-model="ApplyForm.assuredSex" class="!w-[180px]">
                      <el-option label="男" value="男" />
                      <el-option label="女" value="女" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="身份证号码" prop="assuredIDCard">
                    <el-input v-model.trim="ApplyForm.assuredIDCard" class="!w-[180px]" />
                  </el-form-item>
                  <el-form-item label="申请时间" prop="applyTime">
                    <el-date-picker v-model="ApplyForm.applyTime" type="date" format="YYYY-MM-DD" class="!w-[180px]"
                      value-format="YYYY-MM-DD" />
                  </el-form-item>
                </div>
                <h2 class="form_tips_title" v-if="lodingType == '车险'">投保车辆</h2>
                <div class="form_tabl_msg" v-if="lodingType == '车险'">
                  <el-form-item label="车辆类型" prop="carType">
                    <el-select v-model="ApplyForm.carType" value-key="label" class="!w-[180px]">
                      <el-option v-for="(t, l) in carttype" :key="l" :label="t.label" :value="t" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="车辆用途" prop="carUse" v-if="!['6', '5', '4'].includes(ApplyForm.carType.cstate)">
                    <el-select v-model="ApplyForm.carUse" class="!w-[180px]">
                      <el-option v-for="(t, l) in Caruse" :key="l" :label="t.label" :value="t.value"
                        :disabled="ApplyForm.carType.cstate !== t.cstate" />
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="车辆用途" prop="carUse" v-if="!(ApplyForm.carType.cstate == '4')">
                  <el-select v-model="ApplyForm.carUse">
                    <el-option v-for="(t, l) in Caruse" :key="l" :label="t.label" :value="t.value"
                      :disabled="ApplyForm.carType.cstate !== t.cstate" />
                  </el-select>
                </el-form-item> -->

                  <el-form-item label="座位数/吨位数" prop="seatTonnage" v-if="ApplyForm.carType.cstate != '3'">
                    <!-- {{ ApplyForm.carType.cstate }} -->
                    <el-input type="number" v-model.number="ApplyForm.seatTonnage" class="!w-[180px]" />
                  </el-form-item>

                  <el-form-item label="车辆使用年限" prop="carUseYear">
                    <el-select v-model="ApplyForm.carUseYear" class="!w-[180px]">
                      <el-option v-for="(t, l) in ServiceLife" :key="l" :label="t.label" :value="t.value" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="新车购置价" prop="buyCarPrice">
                    <el-input v-model.trim="ApplyForm.buyCarPrice" class="!w-[180px]" />
                  </el-form-item>
                  <el-form-item label="出险次数" prop="count">
                    <el-select v-model.trim="ApplyForm.count" class="!w-[180px]">
                      <el-option v-for="(q, w) in accidentsNum" :key="w" :label="q.label" :value="q.value" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="申请时间" prop="applyTime">
                    <el-date-picker type="date" v-model="ApplyForm.applyTime" format="YYYY-MM-DD" class="!w-[180px]"
                      value-format="YYYY-MM-DD" />
                  </el-form-item>
                </div>
                <div class="form_tabl_tips" v-if="lodingType == '车险'">
                  <h4>注：车辆用途</h4>
                  <p>特种车型一：油罐车、汽罐车、液罐车； </p>
                  <p>特种车型二：专用净水车、特种车一以外的罐式货车，以及用于清障、清扫、清洁、起重、装卸、升降、搅拌、挖掘、推土、冷藏、保温等的各种专用机动车；</p>
                  <p>特种车型三：装有固定专用仪器设备从事专业工作的监测、消防、运钞、医疗、电视转播等的各种专用机动车；</p>
                  <p>特种车型四：集装箱拖头。</p>
                </div>
              </el-form>
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane label="投保方案" name="2">
            <el-form-item label="保险产品名称：" class="tb_itemform">
              <el-input disabled v-model="ProductName" />
            </el-form-item>
            <el-scrollbar height="390px">
              <!-- 投保方案 -->
              <table class="mytable">
                <thead class="mytable_head">
                  <tr>
                    <th>序号</th>
                    <th>保险项目</th>
                    <th>保险范围</th>
                    <th>保障金额</th>
                    <th>选择</th>
                  </tr>
                </thead>
                <tbody class="mytable_body">
                  <tr v-for="(o, u) in  insureDetailList " :key="u">
                    <td>{{ u + 1 }}</td>
                    <td :value="stubims[u]['projectName'] = o.project">{{ o.project }} </td>
                    <td :value="stubims[u]['range'] = o.range">{{ o.range }} </td>
                    <td :value="stubims[u]['price'] = o.insureRange">{{ o.insureRange }} </td>
                    <td class="selete_td">
                      <el-checkbox-group v-model="stubims[u]['pSelect'][0]" v-if="o.range !== '乘客人身伤亡'" :max="1">
                        <p v-for="(k, l) in o.isSelects" :key="k.id">
                          <el-checkbox :label="k.isSelect">
                            {{ o.project == '交强险' ? '' : k.isSelect }}
                          </el-checkbox>
                        </p>
                      </el-checkbox-group>
                      <!-- <el-radio-group v-model="stubims[u]['pSelect'][0]" v-if="o.range !== '乘客人身伤亡'">
                      <el-radio v-for="(k, l) in o.isSelects" :key="k.id" :label="k.isSelect">
                        {{ k.isSelect }}
                      </el-radio>
                    </el-radio-group> -->
                      <!-- 乘客人身伤亡 -->

                      <div v-else class="outsele">
                        <el-checkbox-group v-model="stubims[u]['pSelect'][0]">
                          <el-checkbox label="1-10"> 驾驶员 </el-checkbox>
                        </el-checkbox-group>
                        <el-checkbox-group v-model="stubims[u]['pSelect'][1]">
                          <el-checkbox label="1-10"> 乘员 </el-checkbox>
                        </el-checkbox-group>
                        <!-- <el-form-item label="驾驶员" class="outsele_item"> -->
                        <!-- <el-select v-model="stubims[u]['pSelect'][0]" size="small">
                          <el-option v-for="item in 10" :key="item" :label="item + '万'" :value="item + '万'" />
                        </el-select> -->
                        <!-- </el-form-item>
                      <el-form-item label="乘员" class="outsele_item"> -->
                        <!-- <el-select size="small" v-model="stubims[u]['pSelect'][1]">
                          <el-option label="不投" value="不投" />
                          <el-option v-for="item in 10" :key="item" :label="item + '万'" :value="item + '万'" />
                        </el-select> -->
                        <!-- </el-form-item> -->
                        <el-form-item label="乘员数" class="outsele_item" v-if="stubims[u]['pSelect'][1] != '不投'">
                          <el-select size="small" v-model="stubims[u]['pSelect'][2]" multiple :multiple-limit="1">
                            <el-option v-for=" item  in  10" :key="item" :label="item + '人'" :value="item + '人'" />
                          </el-select>
                        </el-form-item>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </el-scrollbar>
          </el-tab-pane>
        </el-tabs>

      </template>
      <template #footer>
        <el-button type="primary" @click="stubim_from(Refstubim_from)" :loading="btnloading">确定 </el-button>
        <el-button @click="close_from(Refstubim_from)"> 取消 </el-button>
      </template>
    </ReDialog>
  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

.main {
  height: 100%;
}

.form_tabl_msg {
  display: flex;
  flex-wrap: wrap;

  :deep(.el-select) {
    width: 192px;
  }
}

.form_tips_title {
  text-align: left;
  line-height: 32px;
}

.form_tabl_tips {
  text-align: left;
  font-size: 14px;
}

:deep(.list_hei.p-2) {
  padding: 0;
}

:deep(.list_hei.mt-6) {
  margin: 0;
}

:deep(.el-dialog__body) {
  padding: 5px;

  .el-form {
    padding: 5px 10px;
  }
}

:deep(.el-dialog__footer) {
  text-align: center;
}

.mytable {
  width: 100%;
  font-size: 14px;

  .mytable_head {
    tr {
      th {
        border: 1px solid #ccc;
        line-height: 32px;
      }
    }
  }

  .mytable_body>tr>td {
    border: 1px solid #ccc;
    line-height: 32px;
    text-align: center;
  }

}

.selete_td {
  :deep(.el-radio-group) {
    display: grid;
  }

  :deep(.el-radio) {
    height: 32px;
    margin: 0 auto;
  }
}

.tbcenter {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 22px;
}

.tb_itemform {
  margin: 5px 0;
  padding-left: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
}

.outsele {
  .outsele_item {
    margin: 5px auto;
    padding-left: 5px;
    width: 120px;

    :deep(.el-select) {
      width: 80px;
    }
  }
}

:deep(.el-form) {
  padding-left: 10px;
}
</style>
